<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>宜昌高新区(自贸片区)政务服务大厅</title>
  <style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
  </style>
</head>
<body ng-app="angularApp"  ng-controller="indexController" ng-cloak>
  <div class="bg">
      <div id="topBar">
        <img id="icon" src="/img/icon.png"/>
        <img id="slogan" src="/img/slogan.png"/>
        <span id="dateAndTime"> {{date}}  </span>
      </div>
      <div id="centerDiv">
        <div class="events">
          <div class="title">
            <div style="width: 450px">审批事项</div>
            <div style="width: 550px">办件编码</div>
            <div style="width: 700px">审批部门</div>
            <div style="width: 200px">办理状态</div>
          </div>
          <div id="scrollAuto" >
            <ul >
              <li class="row" ng-repeat="item in page.data" ng-style="{'background-color':item.index%2==0?'#FFFFFF':'#F2F6FC'}">
                <div style="width: 450px">{{item.itemName}}</div>
                <div style="width: 550px;word-break: break-all;">{{item.processNo}}</div>
                <div style="width: 700px">{{item.orgName}}</div>
                <div class="yellow" style="width: 200px">{{item.processName}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</body>
<script type="text/javascript" src="res/angular/angular.min.js"></script>
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/index.js"></script>
<script type="text/javascript" src="res/newsScroll.js"></script>
<style type="text/css">

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  html,body,#app,.bg{
    margin: 0 auto;
    background-color: #fff;
    background-size: 100% 100%  ;
    background-repeat:   no-repeat;
    background-attachment:fixed ;
    height: 100%;
  }
  .bg{
    background-image:url(img/bg.jpg);
  }
  #centerDiv{
    padding: 20px;
    box-sizing: border-box;

  }
  #topBar{
    background: url('/img/topBg.png');
    background-size: cover;
    height: 110px;
    padding: 10px;
    position: relative;
  }
  img#slogan{
    transform: translateY(-30%);
  }
  #icon{
    margin-left: 10px;
  }
  #dateAndTime{
    position: absolute;
    right: 20px;
    font-size: 36px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #072858;
    line-height: 100px;
    letter-spacing: 1px;
  }
  .events{
    width: 100%;
    font-size: 28px;
    color: #303030;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
  }
  .title{
    background: #F2F6FC;
    display:flex;
    justify-content:left;
    align-items:center;
    white-space: nowrap;
  }
  .title div{
    padding: 0;
    border: none;
    line-height: 54px;
    text-align: left;
    font-weight: normal;
    height: 60px;
    display: inline-block;
    padding: 10px 0 10px 20px;
  }
  #scrollAuto{
    height: calc(100vh - 250px);
    overflow: hidden;
  }
  ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .row{
    height: 134px;
    display:flex;
    justify-content:left;
    align-items:center;
  }
  .row div{
    display: inline-block;
    padding: 10px 0 10px 20px;
  }
   .yellow{
     color: #FF5B24;
   }
</style>
</html>